<script lang="ts" setup>
import { useVbenForm } from "#/adapter/form";
import { info, save } from "#/api/system/config";
import { Page } from "@vben/common-ui";
import { Button, message } from "ant-design-vue";
import { h, onMounted } from "vue";
import { transformData,convertStringNumbers } from "./schemas";


const fieldLink ={
  site_open:'站点开启',
  site_url:'网站地址',
  site_name:'站点名称',
  site_logo:'站点Logo',
  site_network_security:'网备案号',
  site_description:'网站描述',
  site_record_no:'网站ICP',
  site_icp_url:'ICP URL',
  site_network_security_url:'网安备案链接',

}

const [BaseForm, formApi] = useVbenForm({
  handleSubmit: onSubmit,
  // 垂直布局，label和input在不同行，值为vertical
  layout: "horizontal",
  wrapperClass: "grid-cols-1 md:grid-cols-1 lg:grid-cols-1",
  commonConfig: {},
  resetButtonOptions: {
    show: false,
  },
  submitButtonOptions: {
    show: false,
  },
  schema: [
    {
      fieldName: "site_open",
      label: fieldLink.site_open,
      component: "ApiDict",
      defaultValue: 1,
      componentProps: {
        placeholder: "请选择是否启用",
        code: "yes_no",
        isBtn: true,
        renderType: "RadioGroup",
      },
      rules: "selectRequired",
    },
    {
      fieldName: "site_url",
      label: fieldLink.site_url,
      component: "Input",
      componentProps: {
        placeholder: "请输入后端网站地址",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
      rules: "required",
    },
    {
      fieldName: "site_name",
      label: fieldLink.site_name,
      component: "Input",
      componentProps: {
        placeholder: "请输入站点名称",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
      rules: "required",
    },
    {
      fieldName: "site_logo",
      label: fieldLink.site_logo,
      component: "Avatar",
      componentProps: {
        placeholder: "",
      },
      formItemClass: "w-full md:w-1/2",
    },
    {
      fieldName: "site_network_security",
      label: fieldLink.site_network_security,
      component: "Input",
      componentProps: {
        placeholder: "",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
    },
    // {
    //   fieldName: 'site_keywords',
    //   label: '关键字',
    //   component: 'Input',
    //   componentProps: {
    //     placeholder: '',
    //     allowClear: true,
    //   },
    //   formItemClass: 'w-full md:w-1/2',
    // },
    {
      fieldName: "site_description",
      label: fieldLink.site_description,
      component: "Input",
      componentProps: {
        placeholder: "",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
    },

    {
      fieldName: "site_record_no",
      label: fieldLink.site_record_no,
      component: "Input",
      componentProps: {
        placeholder: "请输入网站ICP编号",
        allowClear: true,
      },
      formItemClass: "w-full md:w-1/2",
    },
    {
      fieldName: 'site_icp_url',
      label: fieldLink.site_icp_url,
      component: 'Input',
      componentProps: {
        placeholder: '',
        allowClear: true,
      },
      formItemClass: 'w-full md:w-1/2',
    },
    {
      fieldName: 'site_network_security_url',
      label: fieldLink.site_network_security_url,
      component: 'Input',
      componentProps: {
        placeholder: '',
        allowClear: true,
      },
      formItemClass: 'w-full md:w-1/2',
    },
    {
      fieldName: "btn",
      label: "",
      component: () => {
        return h("div", { class: "flex space-x-2" }, [
          h(
            Button,
            {
              type: "primary",
              onClick: onSubmit.bind(null),
            },
            {
              default() {
                return "保存提交";
              },
            }
          ),
        ]);
      },
      componentProps: {},
      formItemClass: "col-span-1",
    },
  ],
});

function onSubmit() {
  formApi.validate().then(async (e: any) => {
    if (e.valid) {
      const values = await formApi.getValues();
      const data = transformData(values, ["btn"], [], { group_code: "site_setting" },fieldLink);
      save(data).then(() => {
        message.success("保存成功");
        retrieveData();
      });
    }
  });
}

/**
 * 获取表单数据
 */
const retrieveData = async () => {
  const record = await info({ group_code: "site_setting" });

  await formApi.setValues({ ...convertStringNumbers(record) });
};

onMounted(async () => {
  retrieveData();
});
</script>

<template>
  <Page content-class="flex flex-col gap-4">
    <BaseForm />
  </Page>
</template>
